import { getNewsSubject } from "@/api/subject";
import { getLabelByValue, SUBJECT_DIFFCULT } from "@/common/constance";
import { Table, Tag, Typography } from "antd";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const { Title } = Typography;
const SubjectNewsTable = () => {
    const [dataSource, setDataSource] = useState<SubjectVO[]>([])
    const colorObj = {
        1: 'success',
        2: 'warning',
        3: 'error'
    };
    const columns: any[] = [
        {
            title: '题目名称',
            dataIndex: 'subjectName',
            key: 'subjectName',
            render: (text: string, record: Subject) => <div className=" text-ellipsis text-nowrap overflow-hidden">
                <Link to={`/subject-info/${record.id}`} target="__blank">{text}</Link>
            </div>,
        },
        {
            title: '题目难度',
            dataIndex: 'subjectDifficult',
            key: 'subjectDifficult',
            render: (text: any) => <Tag color={colorObj[text as unknown as keyof typeof colorObj]}>{getLabelByValue(SUBJECT_DIFFCULT, text)}</Tag>
        },
        {
            title: '题目分类',
            dataIndex: 'categoryList',
            key: 'categoryList',
            render: (_: any, record: SubjectVO) => <div>
                {
                    record.categoryList?.map(item => <Link key={item.id} to={`/label-subject/${item.id}/category`} target="__blank"><Tag>{item.categoryName}</Tag></Link>)
                }
            </div>
        },
        {
            title: '题目标签',
            dataIndex: 'labelList',
            key: 'labelList',
            render: (_: any, record: SubjectVO) => <div>
                {
                    record.labelList?.map(item => <Link key={item.id} to={`/label-subject/${item.id}/label`} target="__blank"><Tag>{item.labelName}</Tag></Link>)
                }
            </div>
        },
    ];
    useEffect(() => {
        getNewsSubject().then(res => {
            setDataSource(res);
        })


    }, [])

    return <div className="mt-8">
        <div>
            <Title level={4}>最新题目</Title>
        </div>
        <Table dataSource={dataSource} columns={columns} pagination={false} />
    </div>
}



export default SubjectNewsTable;